<template>
  <div class="page-container">
    <div class="page-breadcrumb">
      <router-link to="/main">
        <div class="back">
          <img src="@/assets/images/back_icon.png" alt="返回按钮" />
        </div>
      </router-link>
      <div class="text">通讯录</div>
    </div>
    <div class="page-content">
      <div class="left tree-box">
        <div class="text" style="text-align: right;">
          <img
            style="width:40px;height:40px"
            src="@/assets/images/add_btn.png"
            alt="新增通讯录"
            title="新增通讯录"
            @click="addTop"
          />
        </div>
        <el-aside>
          <el-tree
            ref="eventCategoryTree"
            :data="eventCategoryTree"
            :props="defaultProps"
            node-key="id"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
            :render-content="renderContent"
            :expand-on-click-node="false"
          >
          </el-tree>
        </el-aside>
      </div>
      <div class="table-list">
        <div class="table-title">
          <h2>{{ triggerCurrenNode.name }}</h2>
          <div class="search-box">
            <div class="s-input">
              <input
                type="text"
                v-model="formData.keywords"
                placeholder="请输入关键字搜索"
              />
              <img
                src="@/assets/images/search.png"
                alt="搜索按钮"
                @click="searchSub"
              />
            </div>
            <div class="add-btn">
              <img
                src="@/assets/images/add_btn.png"
                alt="新增员工"
                title="新增员工"
                @click="addPersonnel"
              />
            </div>
          </div>
        </div>
        <div class="table-box">
          <el-table v-loading="loading" element-loading-text="数据下载中" :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" width="60px"></el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column
              prop="tel"
              label="座机"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="phone"
              label="手机"
              align="center"
            ></el-table-column>
            <el-table-column label="Email" align="center">
              <template v-slot="{ row }">
                <a :href="'mailto:' + row.email">{{ row.email }}</a>
              </template>
            </el-table-column>
            <el-table-column
              prop="fax"
              label="职务"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="room"
              label="办公地址"
              align="center"
            ></el-table-column>
            <!-- <el-table-column
              prop="dept_name"
              label="部门"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              align="center"
            ></el-table-column> -->
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <div class="option-icon del" @click="delPersonnel(scope.row)">
                  删除
                </div>
                <div
                  class="option-icon change"
                  @click="editPersonnel(scope.row)"
                >
                  修改
                </div>
                <!-- <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >查看</el-button
                >
                <el-button type="text" size="small">编辑</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-box">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formData.pageSize"
            :total="total"
            :page-sizes="sizes"
            @size-change="sizeCurrentChange"
            @current-change="pageCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--新增部门节点弹窗-->
    <el-dialog
      :title="departDialogType == 'edit' ? '编辑' : '新增'"
      width="500px"
      class="add-event-dialog modify-class"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="addEventdialogVisible"
      size="tiny"
    >
      <el-form
        ref="addEventForm"
        :model="addEventForm"
        :rules="addEventNodeRules"
      >
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="addEventForm.name"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="sort_num">
          <br/>
          <el-input-number step-strictly :min="1" controls-position="right" v-model="addEventForm.sort_num"></el-input-number>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button class="btn-comfirm" type="primary" @click="addEventFormSubmitBtn('addEventForm')">确认</el-button>
        <el-button class="btn-cancel" @click="handleCancel">取消</el-button>
      </div>
    </el-dialog>

    <!--员工弹窗-->
    <el-dialog
      :title="personnelDialogType == 'edit' ? '编辑' : '新增'"
      class="add-event-dialog modify-class"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="personnelVisible"
    >
      <el-form
        ref="personnelForm"
        :model="personnelForm"
        :rules="personnelFormRules"
        label-width="100px"
      >
        <el-form-item label="员工名称" prop="name" style="margin-top: 20px;">
          <el-input v-model="personnelForm.name"></el-input>
        </el-form-item>
        <el-form-item label="Email">
          <el-input v-model="personnelForm.email"></el-input>
        </el-form-item>
        <el-form-item label="座机">
          <el-input v-model="personnelForm.tel"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="personnelForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="职务">
          <el-input v-model="personnelForm.fax"></el-input>
        </el-form-item>
        <el-form-item label="办公地址">
          <el-input v-model="personnelForm.room"></el-input>
        </el-form-item>
        <!-- <el-form-item label="部门">
          <el-input v-model="personnelForm.dept_name" disabled></el-input>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="4"
            v-model="personnelForm.remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button class="btn-comfirm" type="primary" @click="personnelFormSubmitBtn('personnelForm')">确认</el-button>
        <el-button class="btn-cancel" @click="handlePersonnelCancel">取消</el-button>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="handlePersonnelCancel">取 消</el-button>
        <el-button
          type="primary"
          @click="personnelFormSubmitBtn('personnelForm')"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import TreeRender from "@/components/treeOptions.vue";
import mainlistApi from "@/apis/overview/maillist.js";
export default {
  name: "mainList",
  data() {
    return {
      sizes: [5, 10, 20, 30, 40, 50, 100],
      eventCategoryTree: [], // 部门树
      defaultProps: {
        children: "list",
        label: "name",
      },
      formData: {
        dept_id: "",
        keywords: "",
        pageNum: 1,
        pageSize: 10,
      },
      departDialogType: "add",
      personnelDialogType: "add",
      /*触发的当前的节点，放到全局，方便调用*/
      triggerCurrenNodeData: {},
      /*触发的当前节点*/
      triggerCurrenNode: {},
      /*新增事件弹窗的输入框数据*/
      addEventdialogVisible: false,
      personnelVisible: false,
      addEventForm: {
        name: "",
        sort_num: "",
        parent_id: "",
        id: "", // 编辑必传
      },
      personnelForm: {},
      addEventNodeRules: {
        name: [
          { required: true, message: "请输入部门名称", trigger: "change" },
        ],
      },
      personnelFormRules: {
        name: [
          { required: true, message: "请输入员工名称", trigger: "change" },
        ],
      },
      loading: false,
      tableData: [],
      total: 0,
    };
  },
  created() {
    this.getDepartTree(); // 查询部门树
    this.getPersonnelList(); // 员工列表
  },
  mounted() {},
  methods: {
    getDepartTree() {
      mainlistApi.maillistFindDepartTree().then((res) => {
        console.log(res);
        if (res.code == "200") {
          this.eventCategoryTree = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 请求员工列表
    getPersonnelList() {
      this.loading = true
      mainlistApi.maillistGetPersonnelList(this.formData).then((res) => {
        if (res.code == "200") {
          let resData = res.data;
          if (resData.list && resData.list.length) {
            this.tableData = resData.list;
          } else {
            this.tableData = [];
          }
          this.total = resData.total ? resData.total : 0;
        } else {
          this.tableData = [];
          this.total = 0;
          this.$message.error(res.msg);
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      });
    },
    // 搜索
    searchSub() {
      // if (this.formData.dept_id == "") {
      //   this.$message.error("请先选择左侧部门列表！");
      //   return;
      // }
      this.getPersonnelList();
    },
    sizeCurrentChange(size) {
      this.formData.pageSize = size
      this.getPersonnelList()
    },
    // 翻页
    pageCurrentChange(val) {
      this.formData.pageNum = val;
      this.getPersonnelList();
    },
    // 新增员工
    addPersonnel() {
      const deptInfo = this.triggerCurrenNode;
      console.log(deptInfo);
      console.log(deptInfo.id);
      if (deptInfo.id !== "" && deptInfo.id !== undefined) {
        // let personnelForm = this.personnelForm;
        this.personnelForm = {
          deptId: deptInfo.id,
          dept_name: deptInfo.name,
          name: "",
          email: "",
          fax: "",
          id: undefined,
          phone: "",
          remark: "",
          room: "",
          tel: "",
        };
        this.personnelDialogType = "add";
        this.personnelVisible = true;
      } else {
        this.$message.error("请先选择左侧部门！");
      }
    },
    // 编辑员工
    editPersonnel(row) {
      console.log(row);
      this.personnelForm = JSON.parse(JSON.stringify(row));
      this.personnelDialogType = "edit";
      this.personnelVisible = true;
    },
    // 删除员工
    delPersonnel(row) {
      this.$confirm("确定要删除该员工吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          mainlistApi.maillistDelPersonnel({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功！");
              this.formData.dept_id = row.deptId;
              this.getPersonnelList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /*渲染函数*/
    renderContent(h, { node, data, store }) {
      let that = this; //指向vue
      return h(TreeRender, {
        props: {
          NODE: node,
          DATA: data,
          STORE: store,
        },
        on: {
          //新增
          Append: (s, d, n) => that.appendEvent(s, d, n),
          //删除节点
          Delete: (s, d, n) => that.removeEvent(s, d, n),
          //编辑
          WatchInfo: (s, d, n) => that.updateEvent(s, d, n),
        },
      });
    },
    // 新增顶级通讯录
    addTop() {
      this.appendEvent()
    },
    // 部门被点击时
    handleNodeClick(data) {
      this.formData.dept_id = data.id;
      this.triggerCurrenNode = data;
      this.getPersonnelList();
    },
    /*树形控件添加节点，添加弹窗出现*/
    appendEvent(s, d) {
      let addEventForm = this.addEventForm;
      addEventForm.name = "";
      addEventForm.sort_num = "";
      this.triggerCurrenNodeData = d;
      this.departDialogType = "add";
      this.addEventdialogVisible = true;
    },
    /*树形控件编辑节点，添加弹窗出现*/
    updateEvent(s, d) {
      let addEventForm = this.addEventForm;
      addEventForm.name = d.name;
      addEventForm.sort_num = d.sort_num;
      this.triggerCurrenNodeData = d;
      this.departDialogType = "edit";
      this.addEventdialogVisible = true;
    },
    /*树形控件删除节点*/
    removeEvent(s, d) {
      this.$confirm("确定要删除该部门吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          mainlistApi.maillistDelDepart({ id: d.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功！");
              this.getDepartTree();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCancel() {
      this.addEventdialogVisible = false;
    },
    handlePersonnelCancel() {
      this.personnelVisible = false;
    },
    /*节点新增，新增树形菜单事件分类弹窗，提交按钮*/
    addEventFormSubmitBtn(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let dataPost = {
            name: this.addEventForm.name,
            sort_num: this.addEventForm.sort_num,
            parent_id:
              this.departDialogType == "add"
                ? this.triggerCurrenNodeData ? this.triggerCurrenNodeData.id : 0
                : undefined,
            id:
              this.departDialogType == "edit"
                ? this.triggerCurrenNodeData.id
                : undefined,
          };
          (this.departDialogType == "edit"
            ? mainlistApi.maillistUpdateDepart(dataPost)
            : mainlistApi.maillistAddDepart(dataPost)
          ).then((res) => {
            if (res.code == "200") {
              this.$message.success(
                this.departDialogType == "edit" ? "修改成功！" : "新增成功！"
              );
              this.addEventdialogVisible = false;
              this.getDepartTree();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 新增员工
    personnelFormSubmitBtn(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let dataPost = this.personnelForm;
          (this.personnelDialogType == "edit"
            ? mainlistApi.maillistUpdatePersonnel(dataPost)
            : mainlistApi.maillistAddPersonnel(dataPost)
          ).then((res) => {
            if (res.code == "200") {
              this.$message.success(
                this.personnelDialogType == "edit" ? "修改成功！" : "新增成功！"
              );
              this.personnelVisible = false;
              this.formData.dept_id = dataPost.deptId;
              this.getPersonnelList();
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.page-container {
  .page-breadcrumb {
    height: 58px;
    width: 100%;
    padding: 0 30px;
    display: flex;
    background: #f9f9f9;
    box-shadow: 0px 3px 8px 0px rgba(122, 128, 159, 0.1);
    .back {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 0 20px;
      cursor: pointer;
      img {
        width: 30px;
        height: 20px;
      }
    }
    .text {
      display: flex;
      align-items: center;
      margin-left: 17px;
      font-size: 26px;
      color: #111434;
      font-weight: 400;
    }
  }
  .page-content {
    background: linear-gradient(0deg, #e7e9f2 0%, #e7e9f2 100%);
    display: flex;
    overflow: hidden;
    .left {
      width: 340px;
      min-height: calc(100vh - 135px);
      background: #f2f3f7;
      box-shadow: 0px 3px 31px 1px rgba(95, 99, 115, 0.25);
      padding: 20px;
      /deep/.el-tree {
        background: none;
        .el-tree-node__expand-icon {
          font-size: 18px;
        }
        .el-tree-node__content {
          height: 35px;
        }
      }
      /deep/
        .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background-color: #dee1eb;
      }
    }
    .table-list {
      flex: 1;
      padding: 17px 40px;
      .search-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        .add-btn {
          cursor: pointer;
          img {
            height: 40px;
            width: 40px;
          }
        }
      }
      .table-title {
        margin: 10px 0;
        display: flex;
        justify-content: space-between;
        h2 {
          font-size: 24px;
          font-weight: 400;
          // text-decoration: underline;
          color: #111434;
        }
      }
      .table-box {
        .option-icon {
          width: 36px;
          height: 36px;
          display: inline-block;
          text-indent: -999px;
          overflow: hidden;
          cursor: pointer;
          &.del {
            background: url("../../../../assets/images/del_btn.png") center
              no-repeat;
            margin-right: 3px;
            &:hover {
              background: url("../../../../assets/images/del_btn_a.png") center
                no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
          &.change {
            background: url("../../../../assets/images/change_btn.png") center
              no-repeat;
            &:hover {
              background: url("../../../../assets/images/change_btn_a.png")
                center no-repeat;
              background-size: 100%;
            }
            background-size: 100%;
          }
        }
        /deep/ .el-table {
          thead {
            th {
              background: #d8dcea;
              font-size: 20px;
              color: #505971;
            }
          }
          tbody {
            td {
              font-size: 18px;
              color: #111434;
            }
          }
        }
      }
      .pagination-box {
        padding: 10px 0;
        text-align: center;
      }
    }
  }
}
input::-webkit-input-placeholder {
  color: #a8adb7;
}
input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #a8adb7;
}
input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #a8adb7;
}
input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #a8adb7;
}
// /deep/.el-tree-node__expand-icon.expanded {
//   transform: rotate(0deg);
// }
// /deep/.el-tree-node__expand-icon.is-leaf {
//   background: url('../../../../assets/images/tree_leaf.png') center no-repeat;
// }
a {
  color: #285fe3;
}
.el-table {
  background-color: transparent;
}
/deep/.el-table tr {
  position: relative;
  background: #ffffff;
  &.current-row,
  &.hover-row,
  &:hover {
    background-color: #e6edfb;
    td {
      position: relative;
      transition: none;
      background-color: #e6edfb;
      &:first-child {
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          width: 3px;
          background-color: rgb(65, 129, 255);
        }
      }
    }
  }
}
.tree-box {
  ::v-deep {
    .el-tree-node__children {
      position: relative;
      padding-left: 30px;
      &::before {
        content: '';
        border-left: 1px dashed #999999;
        height: calc(100%);
        position: absolute;
        left: 6px;
        top: 0px;
      }
      .el-tree-node {
        position: relative;
      }
      .el-tree-node__content {
        position: relative;
        padding-left: 0 !important;
        &::after {
          content: '';
          width: 20px;
          height: 0;
          border-bottom: 1px dashed #999999;
          position: absolute;
          right: calc(100% - -2px);
          top: 17px;
        }
      }
    }
    .el-tree-node__children .el-tree-node:last-child::before {
      content: '';
      width: 4px;
      height: calc(100% - 18px);
      display: block;
      background-color: #f2f3f7;
      position: absolute;
      bottom: 0;
      left: -25px;
    }
    .el-tree-node__expand-icon {
      position: relative;
      width: 17px;
      height: 17px;
      // background: #23b1f0;
      padding: 0;
      margin-right: 5px;
      &.is-leaf {
        display: none;
      }
      &::before {
        content: '+';
        width: 14px;
        height: 14px;
        line-height: 13px;
        border-radius: 3px;
        // background: #285fe3;
        font-size: 15px;
        position: absolute;
        top: 1px;
        left: 0;
        color: #505971;
        text-align: center;
        border: 1px solid #505971;
      }
      &.expanded {
        transform: none;
        &::before {
          content: '-';
          line-height: 12px;
          font-size: 20px;
        }
      }
    }
  }
}
</style>
